<template lang="html">
  <div class="data-access-components">
    <div slot="label" class="data-auth-label fbc">
      <span class="text">数据权限:</span>
      <!-- <el-checkbox
        v-model="fullFuncPermissions"
        v-if="!isCheck"
        @change="fullFuncPermissionsChange"
        >全部数据权限</el-checkbox
      > -->
    </div>

    <template slot-scope="{ row, $index }">
      <el-radio-group
        v-model="row.type"
        :disabled="isCheck"
        @change="(val) => radioChange({ val, index: $index })"
      >
        <el-radio
          v-for="(item, index) in dataPermissionTypeOptions"
          :key="index"
          :label="item.value"
          :class="{
            'last-label': index === dataPermissionTypeOptions.length - 1,
          }"
          >{{ item.name }}</el-radio
        >
        <el-button v-if="row.type === '4'" type="text" @click="doModify(row)">{{
          isCheck ? "查看" : "修改"
        }}</el-button>
      </el-radio-group>
    </template>

    <!-- 数据权限弹窗 -->
    <data-access-dialog
      :dialogVisible.sync="dataAccessDialogVisible"
      :dataAccessChecked="dataAccessChecked"
      :currentAppObj="currentAppObj"
      :isCheck="isCheck"
      @success="dataAccessSuccess"
    />
  </div>
</template>

<script>
import DataAccessDialog from "./components/data-access-dialog";
import { mapState } from "vuex";
export default {
  components: { DataAccessDialog },

  props: {
    // 当前行数据
    currentRowObj: {
      type: Object,
      default: () => ({}),
    },
    // 是否为查看
    isCheck: {
      type: Boolean,
      default: false,
    },
    // 数据权限
    dataPermissionTypeOptions: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      // 全部功能权限
      fullFuncPermissions: false,
      // 数据权限弹窗开关
      dataAccessDialogVisible: false,
      dataAccessChecked: [],
      // 所属应用当前行信息
      currentAppObj: null,
    };
  },
  computed: {
    ...mapState("d2admin/user", ["info"]),
  },
  methods: {
    /**
     * 全部功能权限选择事件
     */
    fullFuncPermissionsChange(val) {
      this.affiliationAppOptions.map((item) => {
        item.type = val ? "3" : "";
      });
    },
    /**
     * 数据权限，指定弹窗
     */
    doModify(row) {
      const { dictId, deptIds } = row;
      this.currentDictId = dictId;
      if (this.currentRowObj && !row.hasChanged) {
        this.currentAppObj = { ...row, id: this.currentRowObj.id };
      } else {
        this.currentAppObj = null;
        this.dataAccessChecked = deptIds;
      }
      this.dataAccessDialogVisible = true;
    },
    /**
     * 数据权限弹窗回调
     */
    dataAccessSuccess(val) {
      const { checkedKeys } = val;
      this.affiliationAppOptions.map((item) => {
        if (item.dictId === this.currentDictId) {
          item.deptIds = checkedKeys;
          item.hasChanged = true;
        }
      });
    },
    /**
     * 数据权限数据格式化(父组件调用)
     */
    userOrgPermListFormat({ userOrgPermList }) {
      let obj = {};
      userOrgPermList.map((item) => {
        const { type, deptIds } = item;
        obj = {
          type,
          deptIds,
        };
      });
      this.affiliationAppOptions.map((item) => {
        Object.assign(item, obj[item.value]);
      });
      // this.setFullFuncPermissions();
    },
    /**
     * 设置全部功能权限的值
     */
    setFullFuncPermissions() {
      // const tempArr = this.affiliationAppOptions.filter((item) => item.type === "3");
      // this.fullFuncPermissions = tempArr.length === this.affiliationAppOptions.length;
    },
    /**
     * 数据权限数据的格式化(父组件调用)
     * 只提交配置了的数据
     */
    affiliationAppOptionsFormat() {
      let tempArr = [];
      this.affiliationAppOptions.map((item) => {
        const { type, deptIds } = item;
        if (type) {
          tempArr.push({
            type,
            deptIds,
          });
        }
      });
      return tempArr;
    },
    /**
     * 数据权限的切换
     */
    radioChange() {
      this.setFullFuncPermissions();
    },
  },
};
</script>

<style lang="scss">
.data-access-components {
  .last-label {
    &.el-radio {
      margin-right: 10px !important;
    }
  }
  .radio-hidden {
    display: none;
  }
}
.data-auth-label {
  .text {
    color: #606266;
    &::before {
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
    }
  }
}
</style>
